<template>
  <div class="pay-com">
    <el-dialog
      :visible.sync="dialogVisible"
      top="10vh"
      width="1000px"
      :show-close="false"
      custom-class="pay-dialog"
    >
      <div slot="title">
        <div class="dialog-header">
          <div class="title-flex">
            <div class="title">选择你的方案</div>
            <div class="scheme-type">
              <radio-group
                key-name="code"
                :radio-value.sync="filters.productId"
                code-key="code"
                label-key="name"
                :radio-list="projectTypes"
                @radioChange="typeChange"
              />
            </div>
          </div>
          <div class="close-icon">
            <el-button icon="el-icon-close" circle @click="closeDialog" />
          </div>
        </div>
      </div>
      <div class="dialog-body">
        <div class="pay-body">
          <swiper class="swiper" :options="swiperOption">
            <swiper-slide
              v-for="(item, index) in swiperSlides"
              :key="'slide' + index"
            >
              <div class="slide-wrap">
                <div
                  :class="activeSlide === index ? 'slide-actived' : ''"
                  class="pay-slide"
                  @click="slideClick(item, index)"
                >
                  <div v-if="activeSlide === index" class="introduction">
                    {{ item.introduction }}
                  </div>
                  <div class="price-title">{{ item.priceTitle }}</div>
                  <div class="current-price">
                    <span v-if="item.tradeAmount - 0 === 0">免费</span>
                    <span v-else>¥{{ item.tradeAmount }}</span>
                  </div>
                  <div class="original-price">¥{{ item.oldAmonut }}</div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div
            slot="button-prev"
            :style="{ opacity: activeSlide === 0 ? 0 : 1 }"
            class="swiper-button swiper-button-prev"
          >
            <el-button
              v-if="activeSlide !== 0"
              icon="el-icon-arrow-left"
              circle
            />
          </div>
          <div
            slot="button-next"
            :style="{
              opacity: activeSlide === swiperSlides.length - 4 ? 0 : 1,
            }"
            class="swiper-button swiper-button-next"
          >
            <el-button icon="el-icon-arrow-right" circle />
          </div>
        </div>
        <div class="pay-msg">{{ priceDetail }}</div>
        <div class="pay-detail">
          <div class="pay-type">支付方式</div>
          <div class="pay-wrap">
            <div class="pay-two-code">
              <img src="../../assets/image/twoCode/code1.jpg" alt="15">
            </div>
            <div class="pay-info">
              <div class="service-item">智绘地暖AI服务：1项</div>
              <div class="unit-number">
                付费金额：<span class="pay-unit">¥</span><span class="pay-number">15</span>
              </div>
              <div class="pay-modal">用微信扫码支付</div>
            </div>
          </div>
        </div>
        <div class="subscribe-wrap">
          <div class="subscribe-info">
            订阅即表示你同意<span class="to-link">第三维度使用条款</span>和<span
              class="to-link"
            >自动续费服务</span>
          </div>
          <div class="subscribe-button">
            <el-button size="mini" round @click="addTrade">订阅</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RadioGroup from '@/components/FilterBox/RadioGroup'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import mixin from '@/mixins/mixin'
import moment from 'moment'
export default {
  name: 'PayCom',
  components: {
    RadioGroup,
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
      dialogVisible: false,
      filters: {
        productId: '', // 产品id
        tradeAmount: 0, // 交易金额
        tradeNo: '', // 交易流水
        useType: '', // 交易流水D按天 / T按次
        userid: '' // 用户id
      },
      projectTypes: [],
      activeSlide: 0,
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange() {
            self.activeSlide = this.activeIndex
          }
        }
      },
      priceDetail: '',
      swiperSlides: [
        {
          introduction: '新用户专享',
          priceTitle: '限时免费三天',
          priceDetail: '新用户专享，前三天免费试用，第四天起付费使用',
          begintime: moment(), // 开始时间
          endtime: moment().add(3, 'days'), // 结束时间
          tradeAmount: 0,
          oldAmonut: 99
        },
        {
          introduction: '首三个月半价',
          priceTitle: '连续包月',
          priceDetail: '首3月半价，第四个月起恢复30元续费，可随时取消',
          begintime: moment(), // 开始时间
          endtime: moment().add(1, 'months'), // 结束时间
          tradeAmount: 500,
          oldAmonut: 1000
        }
      ]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
    }
  },
  mixins: [mixin],
  created() {
    this.findDictData({ dicItem: 'projectType' }, () => {
      if (this.projectTypes.length > 0) {
        this.filters.productId = this.projectTypes[0].code
      }
    })
  },
  mounted() {
    this.dialogVisible = this.visible
    this.priceDetail = this.swiperSlides[0].priceDetail
  },
  methods: {
    slideClick(item, index) {
      this.filters.tradeAmount = item.tradeAmount
      this.priceDetail = item.priceDetail
      this.activeSlide = index
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    typeChange(item) {
      this.filters.productId = item.code
    },
    // 创建交易
    addTrade() {
      const params = {
        coupons: '', // 优惠吗
        productId: this.filters.productId,
        source: 'VX', // 交易来源
        state: 'DEAL', // 交易状态
        tradeAmount: this.filters.tradeAmount,
        userid: this.userInfo.userId
      }
      this.$api.product.saveTrade(params).then((res) => {
        if (res.code === 200) {
          this.buyTrade(res.data)
        } else {
          this.$message.error('交易失败')
        }
      })
    },
    // 购买交易
    buyTrade(data) {
      const params = {
        amonut: 3,
        productid: data.productId,
        tradeNo: data.tradeNo,
        useType: 'Dd', // D按天  Dd天 Dm月 Dy年 / T按次
        userid: this.userInfo.userId
      }
      this.$api.product.userBuyProject(params).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '交易成功',
            type: 'success'
          })
        } else {
          this.$message.error('交易失败')
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.pay-com {
  ::v-deep .pay-dialog {
    .el-dialog__header {
      padding-right: 0;
      .dialog-header {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        margin: 0;
        .title-flex {
          display: flex;
          align-items: center;
          .title {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            font-size: 20px;
            line-height: 20px;
          }
          .scheme-type {
            margin-left: 10px;
            line-height: 14px;
            font-size: 14px;
          }
        }
      }
    }
    .el-dialog__body {
      padding-top: 15px !important;
      .dialog-body {
        padding: 0 20px;
        .pay-body {
          width: 100%;
          position: relative;
          .swiper {
            .swiper-slide {
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              font-weight: bold;
              font-size: 20px;
              box-sizing: border-box;
              .slide-wrap {
                margin: 20px 0;
                width: 100%;
                .pay-slide {
                  cursor: pointer;
                  width: 100%;
                  border: 1px solid #d7dadc;
                  box-sizing: border-box;
                  border-radius: 10px;
                  position: relative;
                  &:hover {
                    border: 2px solid #8e46eb;
                  }
                  .introduction {
                    position: absolute;
                    top: -12px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: #cc2836;
                    color: #fff;
                    font-size: 12px;
                    font-weight: 600;
                    padding: 0 10px;
                    border-radius: 15px;
                  }
                  .price-title {
                    margin-top: 20px;
                    color: #5b5e60;
                    font-size: 14px;
                  }
                  .current-price {
                    margin-top: 20px;
                    color: #171b20;
                    font-size: 30px;
                    line-height: 30px;
                    font-weight: 600;
                  }
                  .original-price {
                    margin-top: 30px;
                    margin-bottom: 10px;
                    color: #878b8f;
                    font-size: 14px;
                    text-decoration: line-through;
                  }
                }
                .slide-actived {
                  border: 2px solid #8e46eb;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
        .pay-msg {
          color: #2e3135;
          font-size: 14px;
          font-weight: 600;
        }
        .pay-detail {
          margin-top: 20px;
          border: 1px solid #d7dadc;
          border-radius: 10px;
          padding: 20px;
          .pay-type {
            color: #2e3135;
            font-size: 14px;
            font-weight: 600;
          }
          .pay-wrap {
            margin-top: 10px;
            display: flex;
            align-items: center;
            .pay-two-code {
              padding: 20px;
              border: 1px solid #d7dadc;
              border-radius: 10px;
              img {
                height: 200px;
                width: 200px;
              }
            }
            .pay-info {
              margin-left: 20px;
              .service-item {
                color: #2e3135;
                font-size: 14px;
              }
              .unit-number {
                margin-top: 15px;
                font-size: 14px;
                color: #2e3135;
                .pay-unit {
                  color: #cc2836;
                }
                .pay-number {
                  color: #cc2836;
                  font-size: 26px;
                  font-weight: 600;
                }
              }
              .pay-modal {
                margin-top: 15px;
                font-size: 14px;
                color: #2e3135;
              }
            }
          }
        }
        .subscribe-wrap {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .subscribe-info {
            font-size: 14px;
            color: #999b9d;
            .to-link {
              cursor: pointer;
              color: #8e46eb;
              text-decoration: underline;
            }
          }
          .subscribe-button {
            text-align: right;
          }
        }
      }
    }
  }

  ::v-deep .swiper-button-prev {
    left: -12px;
  }
  ::v-deep .swiper-button-next {
    right: -12px;
  }
  ::v-deep .swiper-button-disabled {
    opacity: 1;
  }
}
</style>
